<template>
	<view class="content">
		<view class="nouse-view">
			<view class="title">
				选择要发起组队的订单
			</view>
			<view class="nouse-view-item" v-for="(item,i) in nosueView" @click="gotoYueView(item)" :key="i">
				<view class="item">
					<view class="item-title">
						{{(i + 1) + item.chang_guan_name}}
					</view>
					<view class="item-changdi">
						{{item.chang_di_name}}
					</view>
					<view class="time-content" v-for="(item2,index) in item.time" :key="index">
						<view class="time-item">
							{{slipTime(item2)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		zuduiDating,
		getNoUse
	} from '@/api/mine_api.js'
	import {
		onShow,
		onLoad,
	} from '@dcloudio/uni-app'


	const nosueView = ref([])
	const openId = ref('')

	// 获取未使用
	const _getNoUseList = (openId) => {
		getNoUse(openId).then((res2) => {
			console.log(res2);
			uni.hideLoading();
			nosueView.value = res2.result
			// 如果没有数值
			if (nosueView.value.length == 0) {
				uni.showModal({
					title: '提示',
					content: '没有未使用的预约,请先预约',
					success() {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		})
	}

	const slipTime = (time) => {
		// 用 - 分隔开始时间和结束时间
		const [startTime, endTime] = time.split('-');

		// 处理开始时间
		const startResult = startTime.replace(/^0/, '').split(':').slice(0, 2).join(':');
		// 处理结束时间
		const endResult = endTime.replace(/^0/, '').split(':').slice(0, 2).join(':');

		return '开始时间:' + startResult + ' - ' + '结束时间:' + endResult
	}

	// 跳转预约界面
	const gotoYueView = (data) => {
		uni.navigateTo({
			url: `/pages/mine/zuiduiviews/faqiView?data=${encodeURIComponent(JSON.stringify(data))}`
		})
	}

	onLoad(() => {

		uni.showLoading({
			title: '加载中'
		});

		uni.getStorage({
			key: 'openid',
			success: function(res) {
				openId.value = res.data.openid
				_getNoUseList(res.data.openid)
			}
		})

	})
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);

		.nouse-view {
			padding: 20rpx;

			.title {
				color: lightblue;
				font-weight: 700;
				font-size: 30rpx;
				padding: 20rpx;
				text-align: center;
				background-color: white;
				border-radius: 20rpx;
			}

			.nouse-view-item {
				padding: 20rpx;
				background-color: white;
				border-radius: 20rpx;
				margin-top: 20rpx;

				.item {
					.item-content {
						.time-item {}
					}
				}
			}

		}
	}
</style>